<template>
    <div v-if="app">
        <div class="app-info">
            <div class="app-name">
                <span>{{app.appInfo.appName}}</span>
                <div v-if="app.gitLabProject">
                    <Icon v-if="app.gitLabProject.visibility === 'public'" type="md-globe" size="18"/>
                    <Icon v-if="app.gitLabProject.visibility === 'private'" type="md-lock" size="18" />
                    <Icon v-if="app.gitLabProject.visibility === 'internal'" type="md-map" size="18" />
                    <span>{{app.gitLabProject.visibility}}</span>
                </div>
            </div>
            <div style="font-size: 14px">
                中文名：{{app.appInfo.appNameChs}}
            </div>
            <div >
                <div v-if="app.gitLabProject">创建于{{app.gitLabProject.createdAt | luxon:format('DD')}}</div>
                <div v-else>创建于{{app.appInfo.createdAt}}</div>
            </div>
            <div>
                <div>描述：{{app.appInfo.description}}</div>
            </div>
            <div class="app-gitlab" v-if="app.gitLabProject">
                <Input v-model="gitUrl" readonly style="width: 350px">
                    <Select v-model="methods" slot="prepend" style="width: 80px">
                        <Option value="ssh">SSH</Option>
                        <Option value="http">HTTP</Option>
                    </Select>
                    <Button slot="append"><Icon type="md-copy" size="16" @click="copy"/></Button>
                </Input>
                <div>
                    <Button @click="openGitLab"><i class="fab fa-gitlab" style="font-size: 16px"></i></Button>
                </div>
                <div v-if="app.appInfo.appType === '0'">
                    <Dropdown placement="bottom-start" @on-click="download">
                        <Button :loading="gitLoading"><Icon type="md-cloud-download" size="16"/></Button>
                        <DropdownMenu slot="list">
                            <DropdownItem name="git">生成并上传git</DropdownItem>
                            <DropdownItem name="local">下载到本地</DropdownItem>
                        </DropdownMenu>
                    </Dropdown>
                </div>
            </div>
            <div v-else>
                <Button :loading="gitLoading" @click="download('local')"><Icon type="md-cloud-download" size="16"/></Button>
            </div>
        </div>
        <div class="project-content">
            <Row :gutter="18">
                <Col span="6">
                    <div class="head-item">
                        <div class="head-count">
                            <i class="fas fa-database" style="line-height: 50px;color:#fff;font-size: 25px"></i>
                        </div>
                        <div class="head-content">
                            <p>数据库</p>
                            <v-countup :end-val="app.appDbList.length" :duration="1" main-class="content-count" :countStyle="countStyle"><span slot="rightText" :style="countStyle">个</span></v-countup>
                        </div>
                    </div>
                </Col>
                <Col span="6">
                    <div class="head-item">
                        <div class="head-count" style="background-color: #7ed1e3">
                            <i class="fas fa-table" style="line-height: 50px;color:#fff;font-size: 25px"></i>
                        </div>
                        <div class="head-content">
                            <p>表数量</p>
                            <v-countup :end-val="app.tableCount" :duration="1" main-class="content-count" :countStyle="countStyle"><span slot="rightText" :style="countStyle">个</span></v-countup>
                        </div>
                    </div>
                </Col>
                <Col span="6">
                    <div class="head-item">
                        <div class="head-count" style="background-color: #f1ac74">
                            <i class="fa fa-link" style="line-height: 50px;color:#fff;font-size: 25px"></i>
                        </div>
                        <div class="head-content">
                            <p>接口总数</p>
                            <v-countup :end-val="app.apiCount" :duration="1" main-class="content-count" :countStyle="countStyle"><span slot="rightText" :style="countStyle">个</span></v-countup>
                        </div>
                    </div>
                </Col>
                <Col span="6">
                    <div class="head-item">
                        <div class="head-count" style="background-color: #f47a7a">
                            <i class="fa fa-cog" style="line-height: 50px;color:#fff;font-size: 25px"></i>
                        </div>
                        <div class="head-content">
                            <p>插件数</p>
                            <v-countup :end-val="app.appConfigList.length" :duration="1" main-class="content-count" :countStyle="countStyle"><span slot="rightText" :style="countStyle">个</span></v-countup>
                        </div>
                    </div>
                </Col>
            </Row>
        </div>
        <div class="sonar-content" v-if="metrics">
            <div class="sonar-title">
                <div>代码质量</div>
                <Button @click="goSonar" size="small" shape="circle" style="margin-left: 8px" :type="metrics.alert_status.value.toLocaleLowerCase()">{{metrics.alert_status.value}}</Button>
            </div>
            <div class="sonar-result">
                <div style="display: flex; align-items: center">
                    <div class="sonar-item">
                        <div><Avatar size="large" style="background-color: #eabe06"><Icon type="ios-bug" size="22"/></Avatar></div>
                        <div style="margin-left: 8px">
                            <p style="color: #9ea7b4">Bugs</p>
                            <p style="font-size: 16px; font-weight: bold">{{metrics.bugs.value}}</p>
                        </div>
                    </div>
                    <div class="sonar-item">
                        <div><Avatar size="large" style="background-color: #2d8cf0"><Icon type="ios-unlock" size="22"/></Avatar></div>
                        <div style="margin-left: 8px">
                            <p style="color: #9ea7b4">漏洞</p>
                            <p style="font-size: 16px; font-weight: bold">{{metrics.vulnerabilities.value}}</p>
                        </div>
                    </div>
                    <div class="sonar-item">
                        <div><Avatar size="large" style="background-color: #7ed1e3"><Icon type="ios-nuclear" size="22"/></Avatar></div>
                        <div style="margin-left: 8px">
                            <p style="color: #9ea7b4">异味</p>
                            <p style="font-size: 16px; font-weight: bold">{{metrics.code_smells.value}}</p>
                        </div>
                    </div>
                    <div class="sonar-item">
                        <div><Avatar size="large" style="background-color: #f1ac74"><Icon type="ios-bug" size="22"/></Avatar></div>
                        <div style="margin-left: 8px">
                            <p style="color: #9ea7b4">覆盖率</p>
                            <p style="font-size: 16px; font-weight: bold">{{metrics.coverage.value}}%</p>
                        </div>
                    </div>
                    <div class="sonar-item">
                        <div><Avatar size="large" style="background-color: #87d068"><Icon type="ios-bug" size="22"/></Avatar></div>
                        <div style="margin-left: 8px">
                            <p style="color: #9ea7b4">重复</p>
                            <p style="font-size: 16px; font-weight: bold">{{metrics.duplicated_lines_density.value}}%</p>
                        </div>
                    </div>
                </div>
                <div style="text-align: right; padding-right: 16px">
                    <div style="color: #9ea7b4">最近一次分析: {{periods[0].date | luxon:format('y-MM-dd HH:mm:ss')}}</div>
                    <div style="font-weight: bold;font-size: 14px">{{metrics.ncloc_language_distribution.value.split('=')[0]}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import VCountup from 'v-countup';
    export default {
        data(){
            return {
                id: this.$route.params.id,
                methods: 'ssh',
                countStyle:{
                    fontSize: '24px',
                    color: '#515a6e',
                    fontWeight: 'bold'
                },
                app: null,
                gitLoading: false,
                metrics: null,
                periods: null,
                sonarLink: null
            }
        },
        components:{
            VCountup
        },
        created() {
            this.$axios.get('/mdo/api/v1/app/' + this.id).then(res => {
                this.app = res.data;
                this.getSonar();
                this.getSonarLink();
            }).catch(e => {
                this.$Message.error(e.response.data);
            });
        },
        computed:{
            gitUrl() {
                if (this.app && this.app.gitLabProject) {
                    if (this.methods === 'ssh') {
                        return this.app.gitLabProject.sshUrlToRepo;
                    } else {
                        return this.app.gitLabProject.httpUrlToRepo;
                    }
                }
                return null;
            }
        },
        methods:{
            goSonar(){
                debugger
                if (this.sonarLink) {
                    window.open(this.sonarLink);
                }
            },
            getSonar(){
                this.$axios.get('/mdo/api/v1/sonar/' + this.app.appInfo.appName).then(res => {
                    if (res.data) {
                        this.metrics = {};
                        let metrics = res.data.component.measures;
                        metrics.forEach(item => {
                            this.$set(this.metrics, item.metric, item);
                        });
                        this.periods = res.data.periods;
                    }
                });
            },
            getSonarLink(){
                this.$axios.get('/mdo/api/v1/sonar/' + this.app.appInfo.appName + '/link').then(res => {
                    if (res.data) {
                        this.sonarLink = res.data;
                    }
                });
            },
            copy(){
                let oInput = document.createElement('input');
                oInput.value = this.gitUrl;
                oInput.style.position = "absolute";
                oInput.style.top = "0";
                oInput.style.left = "0";
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                if (document.execCommand('Copy')) {
                    this.$Message.info('复制成功');
                }
                document.body.removeChild(oInput);
            },
            openGitLab(){
                window.open(this.app.gitLabProject.webUrl);
            },
            download(name){
                if (name === 'git') {
                    this.$Modal.confirm({
                        title: '生成并提交git',
                        content: '<p>重新生成代码并上传git的master分支</p><p style="color: #ed4014">注意：该功能会覆盖master的所有代码！</p>',
                        onOk: () => {
                            this.gitLoading = true;
                            this.$nextTick(()=>{
                                this.$axios.get('/mdo/api/v1/app/over/' + this.id).then(res=>{
                                    if (res.status === 200) {
                                        this.$Message.success('success!');
                                        this.gitLoading = false;
                                    }
                                });
                            });
                        }
                    });
                } else if (name === 'local') {
                    this.gitLoading = true;
                    let _this = this;
                    let fileName = this.app.appInfo.appName + ".zip";
                    let xhr = new XMLHttpRequest();
                    xhr.open('GET', '/mdo/api/v1/app/download/' + this.id, true);
                    xhr.responseType = 'blob';
                    this.$nextTick(()=>{
                        xhr.onload = function () {
                            if (this.getResponseHeader("content-disposition") && this.getResponseHeader("content-disposition").indexOf('filename') > -1) {
                                fileName = this.getResponseHeader("content-disposition").split(";")[1].split("filename=")[1];
                                fileName = fileName.replace(new RegExp('"', 'g'),'').replace(new RegExp('\'', 'g'),'');
                            }
                            if (this.status === 200) {
                                let blob = this.response;
                                if (navigator.appVersion.toString().indexOf('.NET') > 0) {
                                    window.navigator.msSaveBlob(blob, fileName);
                                } else {
                                    let body = document.body;
                                    let a = document.createElement('a');
                                    a.download = fileName;
                                    a.href = URL.createObjectURL(blob);
                                    body.appendChild(a);
                                    a.click();
                                    body.removeChild(a);
                                }
                            } else {
                                _this.$Message.error('应用下载失败');
                            }
                            _this.gitLoading = false;
                        };
                    });
                    xhr.send();
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .app-info{
        margin: 16px 0;
        &>div{
            margin-bottom: 8px;
        }

        .app-name{
            display: flex;
            align-items: center;
            i{
                color: @subsidiary-color;
                vertical-align: text-bottom;
                margin-right: 4px;
            }
            span{
                font-size: 14px;
                color: @subsidiary-color;
            }
            &>span{
                font-size: 16px;
                font-weight: bold;
                margin-right: 12px;
                color: @text-color;
            }
        }

        .app-gitlab{
            margin-top: 16px;
            display: flex;
            align-items: center;
            line-height: 32px;

            &>div{
                margin-right: 16px;
            }
        }
    }

    .project-content {
        .head-item {
            display: flex;
            align-items: center;
            height: 85px;
            padding: 0 16px;
            background-color: #fff;
            border: 1px solid @border-color-base;
            border-radius: 4px;
            /*box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.03);*/

            .head-count {
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-color: #2d8cf0;
                text-align: center;
                margin-right: 16px;
            }

            .head-content {
                p {
                    color: #999;
                    font-size: 12px;
                }
            }
        }
    }

    .sonar-content{
        margin-top: 24px;

        .sonar-title{
            color: #464c5b;
            font-size: 14px;
            font-weight: bold;
            display: flex;
            align-items: center;
        }

        .sonar-result{
            margin-top: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid @border-color-base;
            border-radius: 4px;
            height: 85px;

            .sonar-item{
                padding: 0 16px;
                display: flex;
                align-items: center;
            }
        }
    }
</style>